<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <div class="filter-contain">
        <el-input
          v-model="listQuery.name"
          placeholder="请输入姓名"
          size="normal"
          clearable
          @keyup.enter.native="handleSearch"
        />
        <el-select v-model="listQuery.status" value-key="" placeholder="请选择状态" clearable filterable @change="handleSearch">
          <el-option
            v-for="item in statusMap"
            :key="item"
            :vabel="item"
            :name="item"
          />
        </el-select>
        <el-button type="success" @click="handleCreate">新增</el-button>
      </div>
      <el-table-column align="center" label="ID">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="学号">
        <template slot-scope="scope">
          {{ scope.row.num }}
        </template>
      </el-table-column>
      <el-table-column label="学院" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.school }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="班级">
        <template slot-scope="scope">
          {{ scope.row.class }}
        </template>
      </el-table-column>
      <el-table-column label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="graduate_time" width="200" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.graduate_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230">
        <template slot-scope="{row, $index}">
          <el-button type="success" size="small" @click="handleupdate(row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(row, $index)">删除</el-button>
        </template>
      </el-table-column>

      <!-- 删除对话框 -->
      <el-dialog :visible="dialogVisable" title="删除宝贝" width="30%">
        <span>确定删除宝贝吗？</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="success" @click="handleConfirm">确认</el-button>
            <el-button @click="dialogVisable=false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisable"
      :title="dialogVisable === 'create' ? '新增': '编辑'"
    >
      <el-form
        ref='dataForm'
        :model='temp'
      >
        <el-form-item label="学号" prop="num">
          <el-input v-model="temp.num" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="temp.school" />
        </el-form-item>
        <el-form-item label="学院" prop="school">
          <el-input v-model="temp.school" />
        </el-form-item>
        <el-form-item label="班级" prop="class">
          <el-input v-model="temp.class" />
        </el-form-item>
        <el-form-item label="学籍状态" prop="status">
          <el-select v-model="temp.status">
            <el-option v-for="(item, index) in statusOpt" :key="index" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="毕业时间" prop="graduate_time">
          <el-select v-model="temp.graduate_time">
            <el-date-picker v-model="temp.graduate_time" type="date" placeholder="请选择时间" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogVisable=false">取消</el-button>
        <el-button type="success" @click=" dialogStatus==='create' ? createDate() : updateData()">确定</el-button>
      </div>
    </el-dialog>
    <pagination
      v-show="total > 0"
      :total="total"
      :page-sync="listQuery.page"
      :limit-sync="listQuery.limit"
      @pagination="fetchData"
    />
  </div>
</template>
<script>
import { getList, updateStu, createStu } from '@/api/student'
import Pagination from '@/components/Pagination'
// import { type } from 'os'
// import { Message } from 'element-ui'
// import { status } from 'nprogress'
// import { required } from 'yargs'

export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '在校': 'success',
        '退学': 'danger',
        '休学': 'gray',
        '参军': 'warning'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      rules: {
        num: [{ required: true, message: '学号不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
      },
      statusOpt: ['在校', '退学', '休学', '参军'],
      // 控制弹窗是否显示的变量，false为不显示，否则显示
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        name: '',
        status: ''
      },
      temp: {
        id: undefined,
        num: undefined,
        name: '',
        school: '',
        class: '',
        status: '',
        graduate_time: new Date()
      },
      dialogVisable: false,
      dialogStatus: 'create'
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.items
        this.listLoading = false
        this.total = response.data.total
      })
    },
    handleupdate(row) {
      this.temp = Object.assign({}, row)
      // 删除确认框弹出
      this.dialogVisable = true
      this.dialogVisable = 'update'
    },
    handleCreate() {
      this.dialogVisable = true
      this.dialogStatus = 'create'
      this.resetTemp()
    },
    createDate() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.temp.id = parseInt(Math.random() * 100) + 1024
          createStu(this.temp).then(() => {
            this.list.unshift(this.temp)
          })
          this.dialogVisable = false
          this.$notify({
            title: '成功',
            message: '新增成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    // 点击删除商品按钮
    // eslint-disable-next-line no-unused-vars
    handleDelete(List, row) {
      // 记录下标
      this.List = List
      // 删除确认框弹出
      this.dialogVisable = true
    },
    // 用户点击确认删除后
    handleConfirm() {
    // 移除商品
      this.List.splice(this.List, 1)
      // 让弹窗消失
      this.dialogVisable = false
    },
    updateData() {
      const tmp = Object.assign({}, this.temp)
      updateStu(tmp).then(() => {
        for (const v of this.list) {
          if (v.id === this.temp.id) {
            const index = this.list.indexOf(v)
            this.list.splice(index, 1, this.temp)
            break
          }
        }
      })
      this.dialogVisable = false
    }

  }
}
</script>
